<template>
  <d-dropdown
    :position="['bottom-end']"
    align="end"
  >
    <div class="lang-dropdown">
      <img v-show="isChinese" class="home-nav-icon inline" src="@/assets/img/icon/line-chinese.svg"/>
      <img v-show="!isChinese" class="home-nav-icon inline" src="@/assets/img/icon/line-english.svg"/>
    </div>
    <template #menu>
      <li
        class="d-dropdown-item"
        v-for="item in linkList"
        :key="item.label"
        @click="handleClick(item)"
      >
        {{ item.label }}
      </li>
    </template>
  </d-dropdown>
</template>

<script setup>
import { ref, computed } from 'vue';

const lang = useCookie('lang');

const isChinese = computed(() => lang.value === 'zh');

const linkList = ref([
  { label: '简体中文', value: 'zh' },
  { label: 'English', value: 'en' }
]);

const handleClick = (linkItem) => {
  if (lang.value === linkItem.value) return;
  lang.value = linkItem.value;
  window.location.reload();
};

</script>
<style scoped lang="scss">
.lang-dropdown {
  cursor: pointer;
  img {
    width: 16px;
  }
}
.d-dropdown-item {
  list-style: none;
  text-align: left;
  cursor: pointer;
  border-radius: 4px;
  padding: 0 8px;
  line-height: 32px;
  min-height: unset;
  &:hover {
    color: #252b3a;
    background-color: #f2f2f3;
  }
}
</style>
